<template>
    <div>
        <ConditionCard
            body-style="padding: 24px"
            class="groupList-addUser"
            @search="queryTableList"
            @reset="reset"
        >
            <el-form ref="queryForm" :model="queryForm" label-width="120px" label-suffix="：">
                <el-row :gutter="2">
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.yearAndSemester')">
                            <CalendarSelect
                                v-model="queryForm.condition.calendarId"
                            ></CalendarSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.auditStatus')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.status"
                                :data="options.status"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.numberAndName')">
                            <el-input
                                :placeholder="$t('schoolAdministration.pleaseEnter')"
                                v-model="queryForm.condition.keyWord"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.college')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.faculty"
                                @change="handleChangeFaculty"
                                :data="options.facultyList"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.major')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.profession"
                                :data="options.profession"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.trainingLevel')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.trainingLevel"
                                :data="options.trainingLevel"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.trainingCategory')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.trainingCategory"
                                :data="options.trainingCategory"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.admissionMode')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.enrolMethods"
                                :data="options.enrolMethods"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.specialPlan')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.specialPlan"
                                :data="options.specialPlan"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item :label="$t('schoolAdministration.internationalStudent')">
                            <DictSelect
                                labelAll="请选择"
                                v-model="queryForm.condition.isOverseas"
                                :data="options.isOverseas"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card>
            <el-row type="flex" justify="space-between" align="center" style="margin-bottom:16px">
                <el-col :span="12">
                    <h1>{{$t('schoolAdministration.creditRecognitionList')}}</h1>
                </el-col>
                <el-col :span="12" style="text-align:right">
                    <el-button type="primary" @click="downLoad">{{$t('schoolAdministration.clickUpload')}}</el-button>
                </el-col>
            </el-row>
            <edu-table
                :order="false"
                :data="tableList"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                @page-change="onCurrentPageChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column :label="$t('schoolAdministration.studentNumber')" prop="studentId" width="80"></el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.fullName')"
                    prop="studentName"
                    width="80"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.exchangeName')"
                    prop="exchangeName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.cognizanceYearAndSemester')"
                    prop="calendarName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('schoolAdministration.oldCourseStr')"
                    prop="oldCourseStr"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column :label="$t('schoolAdministration.identifyCourses')" prop="oldCourseName" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.newCourseList[0] && scope.row.newCourseList[0].courseName }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('schoolAdministration.recognitionResults')" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>
                            {{
                                getStatus(
                                    'scoreTypeList',
                                    scope.row.newCourseList[0] && scope.row.newCourseList[0].newCourseScore
                                ) &&
                                    getStatus(
                                        'scoreTypeList',
                                        scope.row.newCourseList[0] && scope.row.newCourseList[0].newCourseScore
                                    )['label']
                            }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('schoolAdministration.auditStatus')">
                    <template slot-scope="scope">
                        <el-tag :type="getStatus('status', scope.row.approvalStatus)['type']">
                            {{ getStatus('status', scope.row.approvalStatus)['label'] }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('schoolAdministration.operate')" fixed="right" width="100px">
                    <template slot-scope="scope">
                        <el-button type="text" @click.stop="operate('VIEW', scope.row)">
                            {{$t('schoolAdministration.check')}}
                        </el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import minxin from 'common/src/mixins/index.js'
import UTILS from 'common/src/utils/utils'
import { queryDic } from 'common/src/api/dictionary'
import {
    getTableList,
    getScopeTypeList,
    exportApplyList
} from 'common/src/api/internationalExchanges/creditApplication.js'
export default {
    mixins: [minxin],
    data() {
        return {
            queryForm: {
                total_: 0,
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    ids: [],
                    calendarId: '',
                    keyWord: '',
                    status: '',
                    faculty: '',
                    profession: '',
                    trainingLevel: '',
                    trainingCategory: '',
                    enrolMethods: '',
                    specialPlan: '',
                    isOverseas: ''
                }
            },
            tableList: [],
            multipleSelection: [],
            options: {
                facultyList: [],
                profession: [],
                exchangesNatureList: [],
                trainingLevel: [],
                trainingCategory: [],
                enrolMethods: [],
                specialPlan: [],
                isOverseas: [
                    {
                        value: 0,
                        label: '否'
                    },
                    {
                        value: 1,
                        label: '是'
                    }
                ],
                status: [
                    {
                        value: 0,
                        label: '草稿',
                        type: 'info'
                    },
                    {
                        value: 1,
                        label: '审核中',
                        type: ''
                    },
                    {
                        value: 2,
                        label: '已驳回',
                        type: 'warning'
                    },
                    {
                        value: 3,
                        label: '已通过',
                        type: 'success'
                    },
                    {
                        value: 4,
                        label: '已提交',
                        type: 'success'
                    }
                ],
                scoreTypeList: []
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            await this.queryData()
            await this.queryScopeTypeList()
            await this.queryTableList()
        },
        queryData() {
            //筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_JLXZ', 'X_YX', 'X_PYCC', 'X_PYLB', 'X_ZXJH', 'X_RXFS']
            }
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            trainingLevel: 'X_PYCC',
                            trainingCategory: 'X_PYLB',
                            specialPlan: 'X_ZXJH',
                            enrolMethods: 'X_RXFS',
                            facultyList: 'X_YX',
                            exchangesNatureList: 'X_JLXZ'
                        },
                        res.data,
                        this.options
                    )
                }
            })
        },
        // 根据学院获取专业
        handleChangeFaculty(val) {
            this.options.profession = []
            const data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['G_ZY'],
                filter: {
                    prefix: this.queryForm.condition.faculty,
                    specilaCode: 'XY2ZY',
                    facultys: this.queryForm.condition.faculty
                }
            }
            queryDic(data).then(res => {
                if (res.code === 200)
                    UTILS.fillSelect(
                        {
                            profession: 'G_ZY'
                        },
                        res.data,
                        this.options
                    )
            })
        },
        async queryScopeTypeList() {
            let { code, data } = await getScopeTypeList()
            if (code !== 200) return
            this.options.scoreTypeList =
                data[0] &&
                data[0].scoreDetail.map(item => {
                    return {
                        value: item.scoreNum,
                        label: item.scoreName
                    }
                })
        },
        getStatus(exp, value = 0) {
            let list = this.options[exp]
            let obj = list.find(item => item.value == value)
            return obj || {}
        },
        async queryTableList(params = this.queryForm) {
            let { code, data } = await getTableList(params)
            if (code !== 200) return
            data.list.forEach(ele => {
                ele.newCourseList = ele.newCourseList || [];
                ele.newCourseList.forEach(item => {
                    ;(item.courseCode = item.newCourseCode),
                        (item.courseName = item.newCourseName),
                        (item.creidits = item.newCredit)
                })
                ele.oldCourseStr = '';
                (ele.oldCourseList || []).forEach((item, index) => {
                    if (ele.oldCourseList.length == index + 1) {
                        ele.oldCourseStr += item.oldCourseName
                    } else {
                        ele.oldCourseStr += `${item.oldCourseName}、`
                    }
                })
            })
            this.tableList = data.list
            this.queryForm.total_ = data.total_
            this.queryForm.pageNum_ = data.pageNum_
            this.queryForm.pageSize_ = data.pageSize_
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        onCurrentPageChange(pager) {
            this.queryForm.pageSize_ = pager.pageSize
            this.queryForm.pageNum_ = pager.pageNum
            this.queryTableList()
        },
        operate(mode, data) {
            let sign = mode === 'ADD'
            let curUser = this.global.currentUser
            let studentInfo = {
                grade: sign ? curUser.grade : data.grade,
                studentName: sign ? curUser.name : data.studentName,
                studentId: sign ? curUser.uid : data.studentId
            }
            this.$router.push({
                path: '/UGIECreditDetail',
                query: {
                    mode,
                    data,
                    type: 0,
                    studentInfo
                }
            })
        },
        downLoad() {
            exportApplyList(
                Object.assign(this.queryForm.condition, {
                    exportType: '1'
                })
            )
        },
        reset() {
            let condition = this.queryForm.condition
            for (let key in condition) {
                if (key == 'ids') {
                    condition[key] = []
                } else if (key !== 'calendarId') {
                    condition[key] = ''
                }
            }
            this.queryForm.total_ = 0
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            this.queryTableList()
        }
    }
}
</script>
<style lang="scss" scoped>
</style>
